<template>
  <view class="page-container">
    <AdaptiveNavBar title="规则中心" :showBack="true" :showHome="false"  backgroundColor="#F37B1D"/>
    <view class="content-area" :style="{ marginTop: $navbarUtil.getNavbarTotalHeightRpx() }">
      <view class="rule-list">
        <view 
          v-for="(item, index) in ruleList" 
          :key="index" 
          class="rule-item"
          @click="goToDetail(item)"
        >
          <view class="rule-item-content">
            <view class="rule-title">{{ item.title }}</view>
            <view class="rule-badge" v-if="item.badge">
              <FontIcon name="icon-announcement" :size="24" color="#FBBD08"></FontIcon>
            </view>
          </view>
          <view class="rule-arrow">
            <FontIcon name="icon-arrow-right" :size="24" color="#999"></FontIcon>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      ruleList: [
        {
          id: 1,
          title: '纤程旅行平台服务协议',
          url: '/public/ruleCenter/detail',
          type: 'service',
          badge: true
        },
        {
          id: 2,
          title: '隐私保护政策',
          url: '/public/ruleCenter/detail',
          type: 'privacy',
          badge: false
        },
        {
          id: 3,
          title: '消费者权益保障措施',
          url: '/public/ruleCenter/detail',
          type: 'consumer',
          badge: false
        },
        {
          id: 4,
          title: '争议调解处理规范',
          url: '/public/ruleCenter/detail',
          type: 'dispute',
          badge: false
        },
        {
          id: 5,
          title: '未成年人参加研学安全须知',
          url: '/public/ruleCenter/detail',
          type: 'safety',
          badge: false
        },
        {
          id: 6,
          title: '保险告知书',
          url: '/public/ruleCenter/detail',
          type: 'insurance',
          badge: false
        }
      ]
    };
  },
  methods: {
    goToDetail(item) {
      uni.navigateTo({
        url: `${item.url}?type=${item.type}&title=${encodeURIComponent(item.title)}`
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.page-container {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.content-area {
  padding: 24rpx;
}

.rule-list {
  background: #ffffff;
  border-radius: 16rpx;
  overflow: hidden;
}

.rule-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx 24rpx;
  border-bottom: 1rpx solid #f0f0f0;
  transition: background-color 0.3s;

  &:last-child {
    border-bottom: none;
  }

  &:active {
    background-color: #f8f8f8;
  }
}

.rule-item-content {
  flex: 1;
  display: flex;
  align-items: center;
}

.rule-title {
  flex: 1;
  font-size: 30rpx;
  color: #333;
  font-weight: 500;
}

.rule-badge {
  margin-left: 16rpx;
  display: flex;
  align-items: center;
}

.rule-arrow {
  margin-left: 24rpx;
  display: flex;
  align-items: center;
}
</style>
